<template>
  <div>
    <el-form id="warning" ref="form" :model="registerForm" label-width="125px" style="padding: 20px 20px;" label-position="left" :disabled="ifDisabled">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="注册地址" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.registerAddress!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.registerAddress}`}}</p></div>
            <el-input class="input" v-model="registerForm.registerAddress" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经营地址" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.businessAddress!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.businessAddress}`}}</p></div>
            <el-input class="input" v-model="registerForm.businessAddress" size="small"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" prop="location" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.location!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.location}`}}</p></div>
            <el-cascader
              v-model="registerForm.location"
              :options="options"
              @change="handleChange"
              :props="prop"
              size="small"
              filterable
              class="input"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="成立日期" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.startDate!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.startDate}`}}</p></div>
            <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.startDate" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="主要业务活动" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.businessRange!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.businessRange}`}}</p></div>
            <el-input type="textarea" :rows="2" v-model="registerForm.businessRange"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册地址坐标" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.registerAddressCode!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.registerAddressCode}`}}</p></div>
            <el-input class="input" v-model="registerForm.registerAddressCode" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经营地址坐标" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.businessAddressCode!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.businessAddressCode}`}}</p></div>
            <el-input class="input" v-model="registerForm.businessAddressCode" size="small"></el-input>
          </el-form-item>
          <el-form-item label="注册号" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.registerId!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.registerId}`}}</p></div>
            <el-input class="input" v-model="registerForm.registerId" size="small"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="operName" style="margin-bottom: 16px;">
            <div v-show="registerFormsFormal.operName!=null" class="warning-box"><p>{{`原值：${registerFormsFormal.operName}`}}</p></div>
            <el-input v-model="registerForm.operName" disabled class="input-btn" size="small"></el-input>
            <el-button type="text" @click="handleDialogShow">选择</el-button>
          </el-form-item>
          <el-form-item label="主办单位" style="margin-bottom: 16px;">
            <div class="warning-box" v-for="item in organizeroptions" :key="item.index">
              <p>{{formate(registerFormsFormal.organizer, item.code, item.value)}}</p>
            </div>
            <el-select v-model="registerForm.organizer" size="small" class="input">
              <el-option
                v-for="item in organizeroptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>          
    </el-form>
    <el-dialog title="选择" :visible.sync="dialogVisible" width="75%" :before-close="handleCancle">
      <el-form ref="dialog" :model="formInline" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="中文名" style="margin-bottom: 16px;" prop="chiName">
              <el-input v-model="formInline.chiName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名" style="margin-bottom: 16px;" prop="engName">
              <el-input v-model="formInline.engName" size="small" @keyup.enter.native="handleSearchPeople"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="margin-bottom: 16px;">
              <el-button type="primary" size="small" @click="handleSearchPeople">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-box">
        <TableComponent :columns="dialogTableColumns" :data="dialogtableData" :tableOption="dialogtableOption" @rowClick="rowClick"></TableComponent>
      </div>
      <span slot="footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/modules/propertyRight.js'
import TableComponent from '@/components/Table/table'
import { dialogTableColumns } from '../js/index.js'
export default {
  components: {
    TableComponent
  },
  props: {
    nineth: {
      type: Object,
      required: true
    }
  },
  watch: {
    nineth: {
      handler(val) {
        this.ifDisabled = val.ifDisabled
      },
      deep: true
    }
  },
  data() {
    return {
      ifDisabled: true,
      registerForm: {
        registerAddress: '',
        businessAddress: '',
        location: [],
        startDate: '',
        businessRange: '',
        registerAddressCode: '',
        businessAddressCode: '',
        registerId: '',
        operName: '',
        organizer: '',
      },
      registerFormsFormal: {},
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        editOrAdd: ''
      },
      organizeroptions: [],
      registerCountry: [],
      registerProvince: [],
      registerCity: [],
      registerArea: [],
      options: [],
      prop: {
        label: 'name',
        value: 'code',
        children: 'child'
      },
      // 负责人dialog
      dialogVisible: false,
      dialogTableColumns,
      formInline: {
        chiName: '',
        engName: '',
        type: '3'
      },
      dialogtableOption: {
        isShowOperate: false
      },
      dialogtableData: [],
      handleName: '',
      handleCode: '',
    }
  },
  methods: {
    // 格式化报警信息
    formate(text, code, value) {
      if (text == code) {
        return `原值：${value}`
      }
    },
    // 基本信息查询(此方法在父组件中调用)
    getBranchMsg(params) {
      this.saveCompanyMsg = params
      api.getEditBasicMsg(params).then(res => {
        if (res.data.code === '0') {
          this.registerForm = res.data.body.temp || {}
          this.registerFormsFormal = res.data.body.formal
        } else {
          return false
        }
      })
    },
    editBranchMsg() {
      const obj = Object.assign(this.registerForm, this.saveCompanyMsg)
      api.addBasicMsg(obj).then(res => {
        if (res.data.code === '0') {
          this.$message.success('保存成功')
          this.getBranchMsg(this.saveCompanyMsg)
          this.ifDisabled = false
          this.$emit('changeStateBranch')
        } else {
          return false
        }
      })
    },
    cmbusinessTypes() {
      // 主办单位
      api.Organizer().then(res => {
        this.organizeroptions = res.data.body
      })
      // 所属地区
      api.allArea().then(res => {
        if (res.data.code === '0') {
          this.options = this.getTreeData(res.data.body)
        }
      })
    },
    getTreeData(data){
      // 循环遍历json数据
      for(let i=0;i<data.length;i++){
        if(data[i].child.length<1){
          // children若为空数组，则将children设为undefined
          data[i].child = undefined
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    // 选择所在地区
    handleChange(val) {
      this.registerForm.location = val
    },
    handleSave() {
      const obj = Object.assign(this.registerForm, this.saveCompanyMsg)
      api.addBasicMsg(obj).then(res => {
        if (res.data.code === '0') {
          this.$message.success('保存成功')
          this.getBranchMsg(this.saveCompanyMsg)
        } else {
          return false
        }
      })
    },
    // 选择自然人弹窗方法
    handleDialogShow() {
      this.dialogVisible = true
    },
    rowClick(val) {
      this.handleName = val.chiName
      this.handleCode = val.code
    },
    // 点击确认选择负责人
    handleDialogShow() {
      this.dialogVisible = true
    },
    handleSubmit() {
      this.registerForm.operName = this.handleName
      this.registerForm.operCode = this.handleCode
      this.handleCancle()
    },
    handleSearchPeople() {
      api.managementOrg(this.formInline).then(res => {
        this.dialogtableData = res.data.body
      })
    },
    handleCancle() {
      this.resetForm('dialog')
      this.handleName = ''
      this.handleCode = ''
      this.dialogtableData = []
      this.dialogVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .btn {
    width: calc(100% - 40px);
    display: flex;
    padding: 0 20px;
    margin-bottom: 10px;
  }
  .input {
    width: 100%;
  }
  .input-btn {
    width: calc(100% - 40px);
  }
  .dialog-box {
    height: 50vh;
    overflow: auto;
  }
  .warning-box {
    font-size: 12px;
    background-color: rgba(225, 101, 49, 0.2);
    border-radius: 3px;
    position: absolute;
    top: -17px;
    left: 0;
    z-index: 1;
    p {
      color: rgba(225, 101, 49);
    }
  }
</style>
<style>
  .el-input.is-disabled .el-input__inner {
    background-color:rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  #warning .el-form-item__content {
    line-height: 17px;
    position: relative;
    font-size: 14px;
  }
</style>